<template>
  <div class="dml-btn" @click="onclick">
    <slot></slot>
    <span class="dml-mask" :class="{'animate' : animate}"></span>
  </div>
</template>
<script>
export default {
  data () {
    return {
      animate: false
    }
  },
  methods:{
    onclick(e){
      var th = this,
          button = th.$el,
          element = button.querySelector('.dml-mask');
      if(button){
        var w = Math.max(button.offsetWidth , button.offsetHeight),
            x = e.layerX - (w / 2),
            y = e.layerY - (w / 2);
          element.setAttribute('style', 'height: ' + w + 'px; width: ' + w + 'px; top: ' + y + 'px; left: ' + x + 'px;')
          th.animate = true;
          setTimeout(function(){
            th.animate = false;
          }, 660);
      };
    }
  }
}
</script>
<style>
.dml-btn{
  display:inline-block;
  position:relative;
  overflow:hidden;
}
.dml-mask{
  display:block;
  position:absolute;
  background:hsla(0, 0%, 65%, 0.66);
  border-radius:100%;
  transform:scale(0);
}
.dml-mask.animate {
  animation:animate 0.65s linear;
}
@keyframes animate{
  100%{
    opacity:0;
    transform:scale(2.5);
  }
}
</style>
